<template>
  <t-dialog v-model:visible="formVisible" size="medium" size-draggable :footer="false" header="生成代码" width="50%">
    <t-space size="large">
      <t-form ref="formRef" :data="form" :rules="rules" layout="inline" @submit="onSubmit">
        <t-row :gutter="24">
          <t-col :span="6">
            <t-form-item name="tableName" label="表名">
              <t-input v-model="form.tableName" disabled />
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item name="tableComment" label="备注">
              <t-input v-model="form.tableComment" placeholder="请填写" />
            </t-form-item>
          </t-col>
        </t-row>
        <t-row :gutter="24">
          <t-col :span="6">
            <t-form-item name="packageName" label="包名">
              <t-input v-model="form.packageName" placeholder="请填写"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item name="moduleName" label="模块名">
              <t-input v-model="form.moduleName" />
            </t-form-item>
          </t-col>
        </t-row>
        <t-row :gutter="24">
          <t-col :span="6">
            <t-form-item name="author" label="作者">
              <t-input v-model="form.author" placeholder="请填写"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="6">
            <t-form-item name="remark" label="其他说明">
              <t-input v-model="form.remark" />
            </t-form-item>
          </t-col>
        </t-row>
        <t-row :gutter="24">
          <t-col :span="6">
            <t-form-item>
              <t-button variant="outline" @click="close">取消</t-button>
              <t-button theme="primary" type="submit">确定</t-button>
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>
    </t-space>
  </t-dialog>
  <t-dialog v-model:visible="viewVisible" :footer="false" header="代码预览" width="50%">
    <t-tabs v-model="activeTab">
      <t-tab-panel v-for="(value, key) in viewData" :key="key" :label="key as unknown as string" :value="key">
        <div style="white-space: pre-wrap">{{ value }}</div>
      </t-tab-panel>
    </t-tabs>
  </t-dialog>
</template>

<script lang="ts" setup>
import { MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { ref } from 'vue';

import { genView } from '@/api/upms/gen';
import { useVisible } from '@/hooks/visible';

const formRef = ref();

const viewVisible = ref(false);

const viewData = ref();

const activeTab = ref('entity');

const initData = () => {
  return {
    tableName: '',
    tableComment: '',
    packageName: '',
    moduleName: '',
    datasourceId: '',
    author: '',
    remark: '',
  };
};

const rules = {
  tableName: [
    {
      required: true,
      message: '表名不能为空',
    },
  ],
  packageName: [
    {
      required: true,
      message: '包名不能为空',
    },
  ],
  moduleName: [
    {
      required: true,
      message: '模块名不能为空',
    },
  ],
};

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  formData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const emit = defineEmits<{
  (e: 'update:visible', v: boolean): void;
  (e: 'refresh'): void;
}>();

const form = ref(props.formData);

const { formVisible, close, open } = useVisible(props, emit);

const onSubmit = async ({ validateResult, firstError }: SubmitContext<FormData>) => {
  if (validateResult === true) {
    await genView(form.value).then((res) => {
      viewVisible.value = true;
      viewData.value = res;
    });

    form.value = { ...initData };
    formVisible.value = false;
  } else {
    MessagePlugin.warning(firstError);
  }
};

open(() => {
  const { packageName, moduleName, author } = props.formData;
  form.value = props.formData;
  if (!packageName) {
    form.value.packageName = 'com.ailot.cloud';
  }
  if (!moduleName) {
    form.value.moduleName = 'module';
  }
  if (!author) {
    form.value.author = 'ailot';
  }
});
</script>
<style scoped>
.overlay-options {
  display: inline-block;
  font-size: 40px;
}
</style>
